<template>
    <view class="inline-block" @tap="tap">
        <template v-if="status==CODE_STATUS.READY">发送验证码</template>
        <template v-else-if="status==CODE_STATUS.SENDING">
            正在发送
            <u-loading-icon></u-loading-icon>
        </template>
        <template v-else-if="status==CODE_STATUS.VERIFY">
            剩余时间（{{num}}）s
        </template>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
enum CODE_STATUS {
    READY,
    SENDING,
    VERIFY
}
let num=ref(60),status=ref(CODE_STATUS.READY);
function tap(){
    if(status.value==CODE_STATUS.READY){
        send()
    }else if(status.value==CODE_STATUS.SENDING){
        uni.$u.toast('发送中')
    }else if(status.value==CODE_STATUS.VERIFY){
        uni.$u.toast('请稍后再发送')
    }
}

function send(){
    sendSuccess()
}
let numInterval:number;
function sendSuccess(){
    status.value=CODE_STATUS.VERIFY
    numInterval=setInterval(()=>{
        num.value--
        if(num.value<=0){
            clearInterval(numInterval)
            status.value=CODE_STATUS.READY
        }
    },1000)
}
</script>